<template>
    <div>
        <el-dialog title='成效对比图' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="dialog-view">
              <div class="dialog-top">
                <div class="dialog-button" id="pep" @click="handleSwitchItem($event,'PEP-3')">PEP-3</div>
                <div class="dialog-button" @click="handleSwitchItem($event,'PDMS-2')">PDMS-2</div>
                <div class="dialog-button">隐藏</div>
                <div class="dialog-button">隐藏</div>
                <div class="dialog-button">隐藏</div>
              </div>
              <div class="dialog-bottom">
                <div class="student-info-view">
                  <div class="photo">
                    <el-image class="header-view" :src="studentInfo.imageUrl?studentInfo.imageUrl:studentHeaderUrl"></el-image>
                  </div>
                  <div class="personInfo">
                    <span class="name">{{studentInfo.name}}</span>
                    <span class="time">{{studentInfo.birthday}}</span>
                  </div>
                  <div class="evaluateDate">
                    <span class="evaluateDateText">评估日期</span>
                    <div class="" style="margin-top: 20px;">
                      <div class="vertical-radios" v-for="(item,index) in evaDate" :key="index">
                        <div class="eva-logo" :style="`background-color: ${item.color};`"></div>
                        <div class="eva-date">{{item.commit_time}}</div>
                      </div>

                    </div>
                  </div>


                </div>
                <div class="echarts-info-view">
                  <div id="evaluateComparisonEcharts"></div>
                </div>
              </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getPep3RecordCompare,getStudentBaseData,getPdms2RecordCompare} from '@/api/student.js'
    import * as echarts from "echarts";
    export default {
        props: ['isShowDialog','selectStudentId'],
        data() {
            return {
              currentSelectItem: undefined,
              evaDate: [],
              radio: 3,
              studentHeaderUrl: require('../../../assets/images/student-header.png'),
              isDisabled: false,
              //   是否显示当前dialog
              isShow: this.isShowDialog,
              studentInfo:{},
              // 评估对比
              evaluateComparisonOption:{
                tooltip: {
                  // 鼠标悬浮提示数据
                  trigger: "axis",
                  backgroundColor: "rgb(32, 33, 36,.7)",
                  borderColor: "rgb(32, 33, 36,0.20)",
                  borderWidth: 15,
                  textStyle: {
                    // 文字提示样式
                    color: "#fff",
                    fontSize: "12",
                  },
                  axisPointer: {
                    // 坐标轴虚线
                    type: "cross",
                    label: {
                      backgroundColor: "#6a7985",
                    },
                  },
                },
                xAxis: {
                  type: 'category',
                  data: ['认知', '语言表达', '语言理解'], // 这里是x轴的标签，可以根据需要调整或动态生成
                  axisLabel: {
                    // color: '#333', // Y轴文本颜色
                    fontSize: 12, // Y轴文本字体大小
                    fontWeight: 'bold',
                    interval: 0,
                    rotate: 10
                  }
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '数据1', // 第一个柱状图的数据集名称
                    data: [120, 200, 150], // 第一个数据集的值
                    type: 'bar', // 设置图表类型为柱状图
                    label: {
                      // show: true,
                      position: 'top',
                      color: 'black',
                      fontWeight: 'bold',
                    },
                    barWidth: "15%", //调整柱状图宽度
                    itemStyle: {
                      normal: {
                        /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                        borderRadius: [0, 0, 0, 0],
                        /*--------设置柱形图渐变色 -------------*/
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#CBE9FE",
                          },
                          {
                            offset: 1,
                            color: "#CBE9FE", // 86 78 255
                          },
                        ]),
                      },
                    },

                  },
                ]
              },
            }
        },
        watch: {
            selectStudentId:{
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
            this.getStudentInfo();
            this.getPep3RecordCompare();
        },
        computed: {
        },
        mounted() {
          this.$nextTick(() => {
            this.currentSelectItem = document.getElementById("pep")
            this.currentSelectItem.classList.add("dialog-button-select")
          })
        },
      methods: {
          handleSwitchItem(event,index){
            if(this.currentSelectItem == event.currentTarget){
              return;
            }
            if(this.currentSelectItem){
              this.currentSelectItem.classList.remove("dialog-button-select")
            }
            this.currentSelectItem = event.currentTarget
            event.currentTarget.classList.add("dialog-button-select")
            if(index == 'PEP-3'){
              this.getPep3RecordCompare();
            }else if(index == 'PDMS-2'){
              this.getPDMS2RecordCompare();
            }

          },
          initEvaluateComparisonEcharts(){
            let chartDom = document.getElementById('evaluateComparisonEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.evaluateComparisonOption);
          },
          getStudentInfo(){
            console.log(this.selectStudentId)
            getStudentBaseData({
              studentId:this.selectStudentId
            }).then((res) => {
              console.log("学生信息：",res)
              if (res.code == 200){
                this.studentInfo = res.data
                if (this.studentInfo.image){
                  this.studentInfo.imageUrl = process.env.VUE_APP_BASE_API + res.data.image
                }else {
                  this.studentInfo.imageUrl = this.studentHeaderUrl
                }
              }
            });
          },
          getPDMS2RecordCompare(){
            getPdms2RecordCompare(this.selectStudentId).then(resp=>{
              console.log("PDMS-2数据",resp)
              this.initDataTable(resp)
            })
          },
          getPep3RecordCompare(){
            console.log("学生id=",this.selectStudentId)
            getPep3RecordCompare(this.selectStudentId).then(resp=>{
              this.initDataTable(resp)
            })
          },
          initDataTable(resp){
            console.log("对比数据",resp)
            // 初始化几个柱状图的颜色
            let colors = [
              {
                color: "#CBE9FE"
              },
              {
                color: "#9FDDFF"
              },
              {
                color: "#11A2F0"
              },
              {
                color: "#CBE9FE"
              },
            ];
            let pep_3_data_list = resp.data;
            let evaluateComparisonOptionCategory = []
            let evaluateComparisonOptionValues = []
            let data1 = pep_3_data_list[0];
            data1.forEach(item => {
              evaluateComparisonOptionCategory.push(item.node_name)
            })
            let evaDate = [];
            pep_3_data_list.forEach((item,index) => {
              let seriesData = {
                name: '数据'+(index+1), // 第一个柱状图的数据集名称
                data: [], // 第一个数据集的值
                type: 'bar', // 设置图表类型为柱状图
                label: {
                  // show: true,
                  position: 'top',
                  color: 'black',
                  fontWeight: 'bold',
                },
                barWidth: "15%", //调整柱状图宽度
                itemStyle: {
                  normal: {
                    /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                    borderRadius: [0, 0, 0, 0],
                    /*--------设置柱形图渐变色 -------------*/
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: colors[index].color,
                      },
                      {
                        offset: 1,
                        color: colors[index].color,// 86 78 255
                      },
                    ]),
                  },
                },

              }
              item.forEach((item,index) => {
                // 把第一个元素的的时间加入到日期集合中
                if(index==0){
                  evaDate.push({
                    commit_time: item.commit_time,
                    color: colors[evaDate.length].color,
                  })
                }
                seriesData.data.push(item.score)
              })
              evaluateComparisonOptionValues.push(seriesData)
              this.evaluateComparisonOption.xAxis.data = evaluateComparisonOptionCategory
              this.evaluateComparisonOption.series = evaluateComparisonOptionValues
              this.initEvaluateComparisonEcharts();


            })
            this.$nextTick(()=>{
              this.evaDate = evaDate.reverse()
              console.log("提交日期格式就是：",evaDate);
            })
          },
          //关闭弹窗清空表单
          onClose() {
              this.$emit('closeStudio')
          },
        },
    }
</script>
<style lang="scss" scoped>
    #evaluateComparisonEcharts{
      height: 50vh;
    }
    .dialog-view {
        width: 100%;
        height: calc(60vh);
        border-radius: 10px;
        padding: 5px;

        .dialog-top{
          height: calc(5vh);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          .dialog-button{
            width: 10vw;
            height: calc(5vh);
            border: 1px solid #DAC8C8;
            font-size: 0.12rem;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
          }

        }

      .dialog-bottom{
        display: flex;
        flex-direction: row;
        margin-top: calc(2.5vh);
        height: calc(50vh);
        .student-info-view{
          flex: 36;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          .photo{
            .header-view {
              width: 180px;
              height: 180px;
            }
          }
          .personInfo{
            margin-top: 20px;
            padding-left: 30px;
            font-size: 0.1rem;
            text-align: left;
          }

          .evaluateDate{
            padding-left: 30px;
            font-size: 0.1rem;
            text-align: left;
            margin-top: 20px;

            .evaluateDateText{
              border-left: 5px solid #1A91FF;
              padding-left: 5px;
            }

            .vertical-radios {
              display: flex;
              flex-direction: row;
              margin-top: 20px;
              align-items: center;
              .eva-logo{
                width: 15px;
                height: 15px;
                border-radius: 20px;
                background-color: pink;
                margin-right: 10px;
              }
              .eva-date{
                height: 15px;
                font-size: 0.09rem;
                font-weight: 600 !important;
              }
            }


          }



        }
        .echarts-info-view{
          flex: 121;
        }
      }


    }
    .dialog-button-select{
      color: white;
      border: 1px solid #1A91FF;
      background-color: #1A91FF;
    }
    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }
</style>

